<template>
  <div>
    <icon-picker v-model:icon="value">
      <template #iconSelect>
        <Input v-model="value" placeholder="请选择图标">
          <template #prefix>
            <IconApps />
          </template>
        </Input>
      </template>
    </icon-picker>
  </div>
</template>

<script lang="ts" setup>
  import { Input } from '@arco-design/web-vue';
  import { IconApps } from '@arco-design/web-vue/es/icon';
  // eslint-disable-next-line import/no-unresolved
  import IconPicker from '@sanqi377/arco-vue-icon-picker';
  import { watch } from 'vue';
  import { watchEffect } from 'vue';
  import { ref } from 'vue';
  const props = defineProps({
    modelValue: '',
  });
  const value = ref(props.modelValue);
  const emits = defineEmits(['update:modelValue']);
  watch(
    () => value.value,
    (v) => {
      emits('update:modelValue', v);
    }
  );
</script>
